<template>
    <div class="video">
        <van-nav-bar
		:title='title'
		left-arrow
		@click-left="onClickLeft"
		/>
        <div style="height: 60px;"></div>
        <div v-if="title == '生前视频'">
            <a href="javascript:;" class="a-upload" v-show="video0.length < 2">
                <input type="file" class="videoBtn" id="video"  @change="onUpload" accept="video/*" capture="user">
            </a>
            <div v-for="(item, index) in video0" :key="index">
                <video :src="item" controls  style="width: 80%;margin-left: 5%;height: 150px;"></video>
                <span @click="delete0(index)">删除</span>
            </div>
            <van-button size="large" @click="save">保存</van-button>
        </div>
        <div v-if="title == '吊唁视频'" >
            <a href="javascript:;" class="a-upload" v-show="memorialtype != 0">
                <input type="file" class="videoBtn" id="video"  @change="onUpload1" accept="video/*" capture="user">
            </a>
            <div v-for="(item, index) in video1" :key="index">
                <video :src="item" controls  style="width: 80%;margin-left: 5%;height: 150px;"></video>
                <span @click="delete1(index)">删除</span>
            </div>
            <van-button size="large" @click="save1">保存</van-button>
        </div>
        <div v-if="title == '祭奠视频'">
            <a href="javascript:;" class="a-upload"  v-show="memorialtype != 0">
                <input type="file" class="videoBtn" id="video"  @change="onUpload2" accept="video/*" capture="user">
            </a>
            <div v-for="(item, index) in video2" :key="index">
                <video :src="item" controls  style="width: 80%;margin-left: 5%;height: 150px;"></video>
                <span @click="delete2(index)">删除</span>
            </div>
            <van-button size="large" @click="save2">保存</van-button>
        </div>
        <div v-if="title == '直播'">
            <a href="javascript:;" class="a-upload" v-show="video3.length < 1 && livemvdays">
                <input type="file" class="videoBtn" id="video"  @change="onUpload3" accept="video/*" capture="user">
            </a>
            <div v-for="(item, index) in video3" :key="index">
                <video :src="item" controls  style="width: 80%;margin-left: 5%;height: 150px;"></video>
                <span @click="delete3(index)">删除</span>
            </div>
            <van-button size="large" @click="save3">保存</van-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            title: this.$route.query.title,
            dialogImageUrl: '',
            dialogVisible: false,
            srcmv: '',
            count: 0,
            videoSrc: '',
            video0: [],
            video1: [],
            video2: [],
            video3: [],
            mid: '',
            livemvdays: '',
            memorialtype:'' 
        }
    },
    created () {
        let item = JSON.parse(window.localStorage.getItem('item'))
        this.memorialtype = item.memorialtype
        this.livemvdays = item.livemvdays
        this.mid = item.id
        if (this.title == '吊唁视频' && item.memorialtype == 0) {
            this.$toast('您当前是免费馆，请升级后，选择上传视频')
        } else if (this.title == '祭奠视频' && item.memorialtype == 0) {
            this.$toast('您当前是免费馆，请升级后，选择上传视频')
        }
        if (this.title == '生前视频') {
            this.getVideo0()
            this.$toast('您可以上传2个生前视频')
        } else if (this.title == '吊唁视频') {
            this.getVideo1()
        } else if (this.title == '祭奠视频') {
            this.getVideo2()
        } else if (this.title == '直播') {
            this.getVideo3()
        }
        if (this.livemvdays == undefined && this.title == '直播') {
            this.$toast('请您先开通直播，再上传视频')
        }
    },
    methods: {
        save () {
            var _this = this;
            _this.$axios.get("/huainianwang/mvInfo/app/saveMv?mid="+this.mid+"&mvtype=0&mvurl="+this.video0+"")
            // _this.$axios.get("/mvInfo/app/saveMv?mid="+this.mid+"&mvtype=0&mvurl="+this.video0+"")
                .then(function(res){
                    _this.getVideo0()
                })
        },
        save1 () {
            var _this = this;
            _this.$axios.get("/huainianwang/mvInfo/app/saveMv?mid="+this.mid+"&mvtype=1&mvurl="+this.video1+"")
            // _this.$axios.get("/mvInfo/app/saveMv?mid="+this.mid+"&mvtype=1&mvurl="+this.video1+"")
                .then(function(res){
                    _this.getVideo1()
                })
        },
        save2 () {
            var _this = this;
            _this.$axios.get("/huainianwang/mvInfo/app/saveMv?mid="+this.mid+"&mvtype=2&mvurl="+this.video2+"")
                .then(function(res){
                    _this.getVideo2()
                })
        },
        save3 () {
            var _this = this;
            _this.$axios.get("/huainianwang/mvInfo/app/saveMv?mid="+this.mid+"&mvtype=3&mvurl="+this.video3+"")
                .then(function(res){
                    _this.getVideo3()
                })
        },
        getVideo0 () {
            var _this = this;
            _this.$axios.get("/huainianwang/mvInfo/app/getMvList?mid="+this.mid+"&mvtype=0")
                .then(function(res){
                    _this.video0 = res.data.object.mvurl.split(',')
                })
        },
        getVideo1 () {
            var _this = this;
            _this.$axios.get("/huainianwang/mvInfo/app/getMvList?mid="+this.mid+"&mvtype=1")
            // _this.$axios.get("/mvInfo/app/getMvList?mid="+this.mid+"&mvtype=1")
                .then(function(res){
                    _this.video1 = res.data.object.mvurl.split(',')
                })
        },
        getVideo2 () {
            var _this = this;
            _this.$axios.get("/huainianwang/mvInfo/app/getMvList?mid="+this.mid+"&mvtype=2")
                .then(function(res){
                    _this.video2 = res.data.object.mvurl.split(',')
                })
        },
        getVideo3 () {
            var _this = this;
            _this.$axios.get("/huainianwang/mvInfo/app/getMvList?mid="+this.mid+"&mvtype=3")
                .then(function(res){
                    _this.video3 = res.data.object.mvurl.split(',')
                })
        },
        delete0 (index) {
            this.video0.splice(index, 1)
            this.$toast('删除成功，请记得保存修改')
        },
        delete1 (index) {
            this.video1.splice(index, 1)
            this.$toast('删除成功，请记得保存修改')
        },
        delete2 (index) {
            this.video2.splice(index, 1)
            this.$toast('删除成功，请记得保存修改')
        },
        delete3 (index) {
            this.video3.splice(index, 1)
            this.$toast('删除成功，请记得保存修改')
        },
        onUpload(event){
            this.count++;
            var _this = this;
            // let orderid = this.$route.query.orderid;
            var reader = new FileReader();
            var video = event.target.files[0];
            reader.readAsDataURL(video);
            reader.onloadend = function () {
                // console.log(reader.result);
                var that = this
                _this.$axios.post("/huainianwang/mvInfo/app/upLoadMv", {
                    url: reader.result,
                    name: '生前相册' + _this.count
                })
                .then(function(res){
                    _this.video0.push(res.data.object)
                })
            }
        },
        onUpload1(event){
            this.count++;
            var _this = this;
            // let orderid = this.$route.query.orderid;
            var reader = new FileReader();
            var video = event.target.files[0];
            reader.readAsDataURL(video);
            reader.onloadend = function () {
                // console.log(reader.result);
                var that = this
                _this.$axios.post("/huainianwang/mvInfo/app/upLoadMv", {
                    url: reader.result,
                    name: '吊唁视频' + _this.count
                })
                .then(function(res){
                    _this.video1.push(res.data.object)
                })
            }
        },
        onUpload2(event){
            this.count++;
            var _this = this;
            // let orderid = this.$route.query.orderid;
            var reader = new FileReader();
            var video = event.target.files[0];
            reader.readAsDataURL(video);
            reader.onloadend = function () {
                // console.log(reader.result);
                var that = this
                _this.$axios.post("/huainianwang/mvInfo/app/upLoadMv", {
                    url: reader.result,
                    name: '祭奠视频' + _this.count
                })
                .then(function(res){
                    _this.video2.push(res.data.object)
                })
            }
        },
        onUpload3(event){
            this.count++;
            var _this = this;
            // let orderid = this.$route.query.orderid;
            var reader = new FileReader();
            var video = event.target.files[0];
            reader.readAsDataURL(video);
            reader.onloadend = function () {
                console.log(reader.result);
                var that = this
                _this.$axios.post("/huainianwang/mvInfo/app/upLoadMv", {
                    url: reader.result,
                    name: '直播' + _this.count
                })
                .then(function(res){
                    _this.video3.push(res.data.object)
                })
            }
        },
        onClickLeft () {
            this.$router.go(-1)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style>
.video .el-upload--picture-card {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important; 
}
</style>
